<template>
  <div style="width: 100%; height: 100%">
    <div class="title">
      <span>已补贴数据</span>
      <span>{{ butieData.amount }}</span>
    </div>
    <div id="right-main"></div>
  </div>
</template>

<script>
export default {
  props: {
    butieData: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    butieData(newValue) {
      this.$props.butieData = newValue;
      this.mapEchart();
    },
  },
  mounted() {
    this.mapEchart();
  },
  methods: {
    mapEchart() {
      var chartDom = document.getElementById("right-main");
      var myChart = this.$echarts.init(chartDom);
      var option;

      const amountData = this.$props.butieData.data_list.map(
        (item) => item.amount
      );

      const dayData = this.$props.butieData.data_list.map((item) => item.day);

      option = {
        grid: {
          top: 20,
        },
        xAxis: {
          type: "category",
          data: dayData,
          axisLabel: {
            textStyle: {
              color: "#fff",
              //fontSize: 16,
            },
          },
        },
        yAxis: {
          type: "value",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#283b56",
            },
          },
        },
        series: [
          {
            data: amountData,
            type: "bar",
            //showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            barWidth: 16,
            itemStyle: {
              normal: {
                barBorderRadius: [8, 8, 0, 0],
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);

      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped>
#right-main {
  width: 100%;
  height: 100%;
}
.title {
  font-size: 20px;
  font-family: Adobe Heiti Std;
  font-weight: bold;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  margin: 10px 20px 0;
}
</style>
